
<html>

<wicket:extend>
<div class="container">
  <h2 style="text-align: center;" wicket:id="top_header"></h2>
  
  <div class="span-24 last" style="text-align: center;">
    <a href="#" wicket:id="room01Link"><img class="tight" wicket:id="room"/></a>
    <a href="#" wicket:id="room02Link"><img class="tight" wicket:id="natural_space"/></a>
    <a href="#" wicket:id="room03Link"><img class="tight" wicket:id="bathroom"/></a>
    <a href="#" wicket:id="room04Link"><img class="tight" wicket:id="kitchen"/></a>
    <a href="#" wicket:id="room05Link"><img class="tight" wicket:id="living"/></a>
    <a href="#" wicket:id="room06Link"><img class="tight" wicket:id="entrance"/></a>
  </div>

  <div class="span-24 last prepend-top">
    <div class="span-4">
    <h3 class="tight">Current Mode:</h3>
    <fieldset>
    <table cellpadding="0" cellspacing="0" class="sortable" width="100%">
      <tbody>
        <tr><td><input type="checkbox" />Manual</td></tr>
        <tr><td><input type="checkbox" />Motion Sensor</td></tr>
        <tr><td><input type="checkbox" />Dim Lighting</td></tr>
        <tr><td><input type="checkbox" />All On</td></tr>
        <tr><td><input type="checkbox" />All Off</td></tr>
        <tr><td><input type="checkbox" />Custom 1</td></tr>
        <tr><td><input type="checkbox" />Custom 2</td></tr>
      </tbody>
    </table>
    </fieldset>    
    <input wicket:id="mode_load" type="button" value="Load"/>
    <input wicket:id="mode_del" type="button" value="Delete"/>    
    <h4><b>Manual - Allows the user to manually configure the lights.</b></h4>    
    <p><h4><i>Note: "Motion Sensing" is the most energy efficient lighting mode because it only turns on lights when there is an occupant present in the room.</i></h4></p>
    </div>
            
      <div class="span-12">
      <input class="span-6" type="button" wicket:id="lights_on" value="Lights On" style="font-size: 24" />
      <input class="span-6" type="button" wicket:id="lights_off" value="Lights Off" style="font-size: 24" />
      
      <!--spacing in between Lights On/Off buttons and Brightness-->
      <div class="span-12">
      <h2></h2> 
      </div>
	  
	  <!-- Brightness bar -->
      <div class="span-12"><h4>Brightness <img wicket:id="full_bar"/> </h4>
      </div>
      
      <div class="span-12">
      <p><h4><i>Note: The brightness functionality must be turned to "ON" in order to be able to adjust the brightness of the lighting.  When this function is turned off, lights will default to full brightness when on and turned off otherwise.</i></h4></p>
      </div>
      
      <h3><b>Lights Quick Control</b></h3>
      <fieldset>
			<p>Room  <input wicket:id="on" type="button" value="On" /> 
					 <input wicket:id="off" type="button" value="Off" /></p> 
			<p>Bathroom  <input wicket:id="on" type="button" value="On" /> 
					 <input wicket:id="off" type="button" value="Off" /></p> 
			<p>Kitchen  <input wicket:id="on" type="button" value="On" /> 
					 <input wicket:id="off" type="button" value="Off" /></p> 
			<p>Living/Sleeping/Dining  <input wicket:id="on" type="button" value="On" /> 
					 <input wicket:id="off" type="button" value="Off" /></p> 
			<p>Front Door  <input wicket:id="on" type="button" value="On" /> 
					 <input wicket:id="off" type="button" value="Off" /></p> 
			</fieldset>      
      </div>
      
      <div class="span-8 last">      
      <h3><b>Manual Color Settings</b></h3>
      <h4>Red <img wicket:id="full_bar"/> 255</h4>
      <h4>Green <img wicket:id="empty_bar"/> 0</h4>
      <h4>Blue <img wicket:id="full_bar"/> 255</h4>      
      <h3><b>Current Lighting  <img wicket:id="purple"/>  </b></h3>      	      
      <h3><b>Preset Colors</b></h3>
    	<img wicket:id="preset_colors"/>
    	<input wicket:id="mode_save" type="button" value="Save" />    
   	  </div>
   	  
  </div>
</div>
    
</wicket:extend>
</html>

